<template>
  <div>
    <ZgNewPage
      ref="page"
      title="发起结算"
      :conditions="conditions"
      :openCondition="true"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :adminWidth="140"
      :labelCol="7"
      @search="onSearch">
      <template slot="columns">
        <a-table-column
          v-for="(h,i) in headers"
          :key="`column${i}`"
          :width="h.width===0 ? 'auto' : h.width"
          :title="h.label">
          <template slot-scope="record">
            {{ record[h.code] }}
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageOpt: {
        showConditionBtn: false
      },
      headers: [
        { code: 'flowName', label: '流程名称', width: 240, isShow: true, sort: 0 },
        { code: 'flowDescrib', label: '流程描述', width: 0, isShow: true, sort: 0 }
      ],
      conditions: [
        { code: 'name', compType: '单行文本', label: '流程名称', defaultVal: '' },
        { code: 'code', compType: '单行文本', label: '流程编码', defaultVal: '' }
      ],
      dataBtns: [
        { key: 1, name: '启动流程', type: 'primary', icon: 'fa-plane', isShow: () => { return true } }
      ]
    }
  },
  methods: {
    onSearch (param) {
      // 加载表头
      const list = [
        { key: '1', id: '1', flowName: '霍州铁路销售主体特殊流程', flowDescrib: '这里是流程描述信息' },
        { key: '2', id: '2', flowName: '霍州铁路销售主体特殊流程', flowDescrib: '这里是流程描述信息' },
        { key: '3', id: '3', flowName: '霍州铁路销售主体特殊流程', flowDescrib: '这里是流程描述信息' },
        { key: '4', id: '4', flowName: '霍州铁路销售主体特殊流程', flowDescrib: '这里是流程描述信息' },
        { key: '5', id: '5', flowName: '霍州铁路销售主体特殊流程', flowDescrib: '这里是流程描述信息' }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    }
  }
}
</script>

<style scoped>

</style>
